<template>
  <div class="saleWrap">
    <div class="nav">
      <router-link
        v-for="item in saleNav"
        :key="item.text"
        :class="{ active: router.path == '/livesales' + item.path }"
        :to="'/livesales' + item.path"
      >
        {{ item.text }}
      </router-link>
    </div>
    <div class="saleContent">
      <router-view />
    </div>
  </div>
</template>
<script lang="ts" setup>
import { reactive } from "vue";
import { useRoute } from "vue-router";
const router = useRoute();
const saleNav = reactive([
  {
    text: "带货列表",
    path: "/livesalelist",
  },
  {
    text: "我的带货",
    path: "/mysalespromotion",
  },

  {
    text: "销售明细",
    path: "/salesdetails",
  },
  {
    text: "收益明细",
    path: "/incomedetails",
  },
  {
    text: "带货流水",
    path: "/merchandisesalesvolume",
  },
]);
</script>
<style lang="scss" scoped>
.saleContent {
  margin-top: 47px;
}
.nav {
  width: max-content;
  margin-top: 35px;
}
.saleWrap {
  margin: 56px 20px 0 20px;
  padding: 12px;
  background-color: white;
  border-radius: 4px;
  flex-grow: 1;
}
.active {
  color: #1664ff;
  background-color: #f2f3f8;
}
a {
  padding: 2px 16px;
  border-radius: 32px;
}
</style>
